<template>
  <div>
    <button @click='f(1)'>c1</button>
    <button @click='f(2)'>c2</button>
    <transition name='qqq'>
      <keep-alive :include='/c1/'>
        <component :is="qqq"></component>
      </keep-alive>
    </transition>

  </div>
</template>

<script>
// template  slot  component
// @ is an alias to /src
import c1 from "./components/c1.vue";
import c2 from "./components/c2.vue";
console.log(c1);
export default {
  name: "XXX",
  data() {
    return {
      qqq: c1,
      obj: { "/qqq": c1, "/www": c2 },
    };
  },
  mounted() {
    if (location.pathname == "/qqq") {
      this.qqq = c1;
    }
  },
  watch: {
    $route() {},
  },
  methods: {
    f(b) {
      if (b == 1) {
        this.qqq = c1;
      } else {
        this.qqq = c2;
      }
    },
  },
};
</script>
<style lang="less">
</style>